<!DOCTYPE html>
<html>

<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
        table {
            margin-top: 20px;
            width: 400px;
            border-collapse: collapse;
            text-align: center;
        }

        td,
        th {
            padding: 3px;
            border: 1px solid black;
        }

        th {
            background: #b0e0e6;
        }

        img {
            max-width: 100%;
            max-height: 100%;
        }

        button {
            background: rgb(45, 226, 9);
            color: rgb(7, 0, 0);
            width: 150px;
            border: none;
            padding: 10px;
            border-radius: 8px;
            font-family: 'Lato';
            margin: 5px;
            margin-top: 20px;
            text-transform: uppercase;
            cursor: pointer;
            outline: none;
        }

        button:hover {
            background: rgb(255, 0, 221);
        }

        input[type="text"] {
            width: 120px;
            text-align: center;
            outline: none;
            border: none;
        }

        .inner {
            font-size: 10px;
            margin-top: -5px;
        }

        .ree {
            display: block;
            width: 100px;
            text-align: left;
        }
    </style>

</head>

<body>
    <div style="overflow-x:auto;">
        <table id="table">
            <thead>
                <tr>
                    <th>N</th>
                    <th>Img</th>
                    <th>balance_info</th>
                    <th>status</th>
                </tr>
            </thead>
            <tbody>
                {% for code in codes %}
                <tr id="{{ code.get('code') }}">
                    <td>{{ loop.index }}</td>
                    <td>
                        <img
                            src="data:image/png;base64,{{ code.get('img', '') }}">
                        <div class="inner"><code>{{code.get('code')}}</code></div>
                    </td>
                    <td><input type="text" value="{{ code.get('balance', 0) }}" name="balance"></td>
                    <td>
                        <label class='ree'><input type="radio" value='yellow' name="{{ code.get('code') }}"
                                onclick=selectOrgChildRec(this)>
                            - Used</label>
                        <label class='ree'><input type="radio" value='red' name="{{ code.get('code') }}"
                                onclick=selectOrgChildRec(this)> -
                            Ban</label>
                    </td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
</body>
<script>
    function LocalStorage(){
        return localStorage.getItem("table") ? JSON.parse(localStorage.getItem("table")) : {}
    }
    function LocalStorageSet(){
        localStorage.setItem(
                "table", JSON.stringify(table)
            );
    }

    function getParentNode(element, level){
        while (level-- > 0) {
            element = element.parentNode;
            if (!element) return null;
        }
        return element;
    }

    function selectOrgChildRec(checkbox) {
        let background = "white"
        let localStorageItem = table[checkbox.name] ? table[checkbox.name] : {}
        if (localStorageItem['status'] == checkbox.value) {
            localStorageItem['status'] = 'white'
            checkbox.checked = false
        } else {
            background = checkbox.value;
            localStorageItem['status'] = checkbox.value;
        }
        getParentNode(checkbox, 3).cells[2].children[0].style.background = background;
        getParentNode(checkbox, 3).style.background = background;
        LocalStorageSet();
    }

    function returnCheckBox(tr) {
        for (let check of tr.children) {
            if (check.children[0].checked == true) {
                return check.children[0].value
            }
        }
        return "white"
    }
    function addSaveBalance(event) {
        let timer;
        let input = event.target;
        clearTimeout(timer);
        timer = setTimeout(() => {
            let localStorageItem = table[getParentNode(input, 2).id] ? table[getParentNode(input, 2)] : {}
            localStorageItem["balance"] = input.value;
            LocalStorageSet();
         }, 2000);
    }
   

    function addEventListenerByName(name, event, fn) {
        let nodeList = document.getElementsByName(name)
        for (var i = 0, len = nodeList.length; i < len; i++) {
            nodeList[i].addEventListener(event, fn);
    }
}

    function Update() {
        if (Object.keys(table).lentgh != 0) {
            for (let i = 1, row; row = document.getElementById("table").rows[i]; i++) {
                let localStorageItem = table[row.id] ? table[row.id] : {}
                let background = localStorageItem["status"] ? localStorageItem["status"] : "white"
                row.cells[2].children[0].style.background = background;
                row.style.background = background;
            }
        } else {
            for (let i = 1, row; row = document.getElementById("table").rows[i]; i++) {
                table[row.id] = {
                    "code": row.id,
                    "balance": row.cells[2].children[0].value,
                    "status": returnCheckBox(row.cells[3])
                }
            }
            LocalStorageSet();
        }
    }
    // Run
    var table = LocalStorage();
    Update()
    addEventListenerByName('balance', 'input', addSaveBalance); 
</script>
</html>